<template>
  <li class="comment-item">
    <div class="inner">
      <div class="avatar-body">
        <nuxt-link :to="'/user/' + comment.userId + '?name=' + comment.userInfo.name" class="avatar">
          <img :src="comment.userInfo.avatar" alt="">
        </nuxt-link>
      </div>
      <div class="comment-body">
        <div class="comment-info">
          <nuxt-link :to="'/user/' + comment.userId + '?name=' + comment.userInfo.name" class="name comment-info-item">
            {{ comment.userInfo.name }}
          </nuxt-link>
          <span class="time comment-info-item">
            {{ $moment(comment.createTime).fromNow() }}
          </span>
        </div>
        <div v-if="comment.commentId" class="comment-content">
          回复
          <nuxt-link class="theme-color" :to="'/user/' + comment.respUserId + '?name=' + comment.respUserInfo.name">
            {{ comment.respUserInfo.name }}
          </nuxt-link>
          ：
          {{ comment.content }}
        </div>
        <div v-if="comment.articleId" class="comment-content">
          {{ comment.content }}
        </div>
        <div class="ctrl-panel">
          <span class="iconfont icon-ic-comment" @click="updateFocus" />
          <span
            v-if="comment.topCommentList"
            :class="isSupport ? 'active' : ''"
            class="iconfont icon-ic-like"
            @click="handleModifySupport"
          />
        </div>
        <comment-input
          v-show="$attrs.focusid === comment.id"
          :target-type="'comment'"
          :target-id="comment.id"
          :target-name="comment.userInfo.name"
          :target-user-id="comment.userId"
          v-bind="$attrs"
          v-on="$listeners"
        />
        <ul v-if="comment.topCommentList && comment.topCommentList.length > 0" class="comment-list">
          <comment-item
            v-for="item of comment.topCommentList"
            :key="item.id"
            :comment="item"
            v-bind="$attrs"
            v-on="$listeners"
          />
        </ul>
      </div>
    </div>
  </li>
</template>

<script>
import { checkUserData } from '~/assets/js/util'
import CommentInput from '~/components/comment/CommentInput'
export default {
  name: 'CommentItem',
  components: {
    CommentInput
  },
  props: {
    comment: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      supportCount: 0,
      isSupport: false
    }
  },
  computed: {
    userData() {
      return this.$store.state.user.userData
    }
  },
  mounted() {
    this.isSupport = this.comment.isSupport ? this.comment.isSupport : false
  },
  methods: {
    updateFocus() {
      const res = checkUserData(this)
      if (!res) return
      this.$emit('updateFocus', this.comment.id)
    },
    async handleModifySupport() {
      const res = checkUserData(this)
      if (!res) return

      const params = {
        'id': this.comment.id
      }
      const data = await this.$request({
        context: this,
        method: this.isSupport ? 'delete' : 'post',
        url: `articleComment/support`,
        params
      })
      if (!data) return
      this.isSupport = !this.isSupport
    }
  }
}
</script>

<style scoped lang="scss">
  @import "~@/assets/css/public";
  li.comment-item {
    margin: 0 20px;
    .inner {
      box-sizing: border-box;
      overflow: hidden;
      padding: 20px 0 10px;
      display: flex;
      align-items: flex-start;

      .avatar-body {
        width: 42px;

        a.avatar {
          display: block;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          overflow: hidden;
          img {
            @include inner-img;
          }
        }
      }

      .comment-body {
        border-bottom: 1px solid $theme-color-background;
        flex: 1;
        margin-left: 14px;
        font-size: 12px;
        .comment-info {
          .comment-info-item {
            margin-right: 10px;
          }
          .time {
            color: #999;
          }
        }
        .comment-content {
          margin: 10px 0;
        }
        .ctrl-panel {
          display: flex;
          justify-content: flex-end;
          margin: 10px 0;

          span {
            margin-left: 20px;
            cursor: pointer;
            color: #ccc;

            &.active {
              color: $theme-color;
            }
          }
        }
        .comment-list {
          margin-top: 20px;
          background: $theme-color-background;
          border-radius: 4px;
        }
      }

    }

  }
</style>
